import React, { Fragment, useEffect, useReducer } from "react";
import { ArrowDownOutlined, ArrowUpOutlined } from "@ant-design/icons";
import { Card, Col, Row, Statistic } from "antd";
import { getOrdersEchartData } from "../../api/serve";
import styles from "./index.module.scss";
import * as echarts from "echarts";
// 初始化订单数据的state
const initState = {
  orderCount: 0,
  saletotalPrice: 0,
  vipPerson: 0,
  myChart: "",
  myChart2: "",
  charData: {},
};
// reducer执行函数
const charReducer = (state = initState, action) => {
  if (action) {
    return { ...state, ...action };
  }
  return state;
};
function Home() {
  // 基于准备好的dom，初始化echarts实例
  const [state, dispatch] = useReducer(charReducer, initState);
  useEffect(function () {
    console.log(1);
    getOrdersEchartData((res) => {
      let myChart = echarts.init(document.getElementById("main"));
      let myChart2 = echarts.init(document.getElementById("main2"));
      let Arr = [];
      //对后端返回的数据进行处理 然后根据echart图表所要的数据进行整理
      Arr = res.data[0].data;
      var newArr = {};
      Arr.forEach((item) => {
        let item2 = item.createtime.substring(0, 10);
        // 将key值都取出来形成一个数组
        if (!newArr[item2]) {
          newArr[item2] = { price: item.allprice, count: 1 };
        } else {
          newArr[item2] = {
            price: newArr[item2].price + item.allprice,
            count: newArr[item2].count + 1,
          };
        }
      });
      console.log(newArr);
      // Object.keys返回的是个数组 遍历对象的key值
      dispatch({
        orderCount: res.data[1].data[0].total,
        saletotalPrice: res.data[2].data[0].total,
        vipPerson: res.data[3].data[0].total,
        charData: newArr,
        myChart: myChart,
        myChart2: myChart2,
      });
    });
  }, []);
  useEffect(
    function () {
      let xData = Object.keys(state.charData);
      if (state.myChart === "") {
        return;
      }
      if (state.myChart !== "") {
        state.myChart.setOption({
          title: {
            text: "日订单数",
          },
          tooltip: {
            trigger: "axis",
          },
          legend: {
            data: [
              "Email",
              "Union Ads",
              "Video Ads",
              "Direct",
              "Search Engine",
            ],
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: xData,
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              name: "订单数",
              type: "line",
              stack: "Total",
              data: xData.map((item) => state.charData[item].count),
            },
          ],
        });
        state.myChart2.setOption({
          title: {
            text: "日销售额",
          },
          tooltip: {
            trigger: "axis",
          },
          legend: {
            data: [
              "Email",
              "Union Ads",
              "Video Ads",
              "Direct",
              "Search Engine",
            ],
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: xData,
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              name: "销售额",
              type: "line",
              stack: "Total",
              data: xData.map((item) => state.charData[item].price),
            },
          ],
        });
      }
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [state.charData]
  );
  return (
    <Fragment>
      <div className="site-statistic-demo-card" style={{ textAlign: "center" }}>
        <Row gutter={24}>
          <Col span={8}>
            <Card>
              <Statistic
                title="订单数量"
                value={state.orderCount}
                precision={2}
                valueStyle={{
                  color: "#3f8600",
                }}
                prefix={<ArrowUpOutlined />}
                suffix="件"
              />
            </Card>
          </Col>
          <Col span={8}>
            <Card>
              <Statistic
                title="销售额"
                value={state.saletotalPrice}
                precision={2}
                valueStyle={{
                  color: "#cf1322",
                }}
                prefix={<ArrowDownOutlined />}
                suffix="￥"
              />
            </Card>
          </Col>
          <Col span={8}>
            <Card>
              <Statistic
                title="会员数"
                value={state.vipPerson}
                precision={0}
                valueStyle={{
                  color: "#3f8600",
                }}
                prefix={<ArrowUpOutlined />}
                suffix="人"
              />
            </Card>
          </Col>
        </Row>
      </div>

      <div id="main" className={styles.echart}></div>
      <div id="main2" className={styles.echart}></div>
    </Fragment>
  );
}
export default Home;
